<template>
  <div class="graphitizing">
    <!-- 表格 -->
    <el-dialog
      title="石墨化装炉报告单"
      :append-to-body="true"
      :visible.sync="shoveCharge"
      :before-close="cancel"
      width="66%"
      center
    >
      <el-select
        v-model="zhuanglu"
        :disabled="disableds"
        placeholder="请选择"
        size="small"
        style="
          position: absolute;
          top: 30px;
          left: 43px;
          width: 150px;
          border: 1px solid #1112;
        "
      >
        <el-option label="单炉" value="单炉"> </el-option>
        <el-option label="双炉" value="双炉"> </el-option>
      </el-select>
      <div class="card-table">
        <el-table
          @cell-click="cellClick(...arguments, 'stoveReport')"
          :row-class-name="tableRowClassName"
          :header-cell-style="getRowClass"
          cell-class-name="cellClassName"
          :data="stoveReport2"
          style="width: 100%; margin-top: -15px"
        >
          <el-table-column
            header-align="center"
            align="center"
            :label="zhuanglu"
          >
            <el-table-column
              header-align="center"
              align="center"
              prop="prop"
              label="A/B"
              width="120"
              v-if="zhuanglu === '双炉'"
            >
              <template slot-scope="{ row, column, $index }">
                <div class="tableSpan" v-if="$index === 0">A</div>
                <div class="tableSpan" v-else>B</div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="stoveNumber"
              label="炉号"
              width="120"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  clearable
                  class="tableInput"
                  v-focus
                  v-model="row.stoveNumber"
                  @blur="tabClickIndex = null"
                  placeholder=""
                >
                </el-input>
                <div v-else class="tableSpan">{{ row.stoveNumber }}</div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="stoveCode"
              label="总第炉数"
              width="120"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  clearable
                  class="tableInput"
                  v-focus
                  type="number"
                  v-model="row.stoveCode"
                  @blur="tabClickIndex = null"
                  placeholder=""
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.stoveCode === 0 ? null : row.stoveCode }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="customer"
              label="客户"
              width="width"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  class="tableInput"
                  v-focus
                  :controls="false"
                  @blur="tabClickIndex = null"
                  v-model="row.customer"
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.customer === 0 ? null : row.customer }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="specification"
              label="规格型号"
              width="width"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  class="tableInput"
                  v-focus
                  :controls="false"
                  @blur="tabClickIndex = null"
                  v-model="row.specification"
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.specification === 0 ? null : row.specification }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="totalStove"
              label="总装炉量（吨）"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  class="tableInput"
                  v-focus
                  :controls="false"
                  @blur="tabClickIndex = null"
                  v-model="row.totalStove"
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.totalStove === 0 ? null : row.totalStove }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="附属品（吨）"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  clearable
                  class="tableInput"
                  v-focus
                  :controls="false"
                  v-model="row.accessory"
                  @blur="tabClickIndex = null"
                  placeholder=""
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.accessory }}
                </div>
              </template>
            </el-table-column>

            <!-- <el-table-column
              header-align="center"
              align="center"
              prop="date"
              label="装炉日期"
              width="200"
            >
              <template slot-scope="{ row, column, $index }">
                <div style="display: flex">
                  <el-date-picker
                    v-model="row.date"
                    type="date"
                    style="border: white; flex: 1"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </div>
              </template>
            </el-table-column> -->
            <el-table-column
              header-align="center"
              align="center"
              prop="chargeRemarks"
              label="备注"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  class="tableInput"
                  v-focus
                  :controls="false"
                  @blur="tabClickIndex = null"
                  v-model="row.chargeRemarks"
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.chargeRemarks === 0 ? null : row.chargeRemarks }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div class="card-table">
        <el-table
          @cell-click="cellClick(...arguments, 'stoveReport')"
          :row-class-name="tableRowClassName"
          :header-cell-style="getRowClass"
          cell-class-name="cellClassName"
          :data="stoveReport1"
          style="width: 100%; margin-top: -15px"
        >
          <el-table-column header-align="center" align="center" label="送电">
            <el-table-column
              header-align="center"
              align="center"
              prop="time"
              label="送电起止时间"
              width="width"
            >
              <template slot-scope="{ row, column, $index }">
                <div style="display: flex">
                  <el-date-picker
                    v-model="time"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd HH:mm:00"
                    value-format="yyyy-MM-dd HH:mm:00"
                  >
                  </el-date-picker>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="basicElectPrice"
              label="基础电费"
              width="200"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  clearable
                  class="tableInput"
                  v-focus
                  v-model="row.basicElectPrice"
                  @blur="tabClickIndex = null"
                  placeholder=""
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.basicElectPrice }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="powerRemarks"
              label="备注   "
              width="600"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  clearable
                  class="tableInput"
                  v-focus
                  v-model="row.powerRemarks"
                  @blur="tabClickIndex = null"
                  placeholder=""
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.powerRemarks }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div class="card-table">
        <el-table
          @cell-click="cellClick(...arguments, 'stoveReport')"
          :row-class-name="tableRowClassName"
          :header-cell-style="getRowClass"
          cell-class-name="cellClassName"
          :data="stoveReport3"
          style="width: 100%; margin-top: -20px"
        >
          <el-table-column header-align="center" align="center" label="质检">
            <!-- <el-table-column
              header-align="center"
              align="center"
              prop="qualityDate"
              label="质检时间"
            >
              <template slot-scope="{ row, column, $index }">
                <div
                  v-if="row.qualityDate && time"
                  class="tableSpan"
                  @click="updateTime"
                >
                  {{ row.qualityDate }}
                </div>

                <div v-else style="display: flex">
                  <el-date-picker
                    v-model="endTime.date"
                    type="date"
                    style="border: white; flex: 1"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  >
                  </el-date-picker>

                  <el-time-picker
                    style="
                      border: none;
                      flex: 1;
                      border-left: 1px solid #c0c4ca;
                    "
                    v-model="endTime.minute"
                    value-format="HH:mm:ss"
                    placeholder="选择时间"
                  >
                  </el-time-picker>
                </div>
              </template>
            </el-table-column> -->
            <el-table-column
              header-align="center"
              align="center"
              prop="passRate"
              label="合格率（%）"
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  class="tableInput"
                  v-focus
                  :controls="false"
                  @blur="tabClickIndex = null"
                  v-model="row.passRate"
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.passRate }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="qualityRemarks"
              label="备注 "
            >
              <template slot-scope="{ row, column, $index }">
                <el-input
                  v-if="$index + column.label + 'stoveReport' === tabClickIndex"
                  class="tableInput"
                  v-focus
                  :controls="false"
                  @blur="tabClickIndex = null"
                  v-model="row.qualityRemarks"
                >
                </el-input>
                <div v-else class="tableSpan">
                  {{ row.qualityRemarks === 0 ? null : row.qualityRemarks }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div class="jiancha">
        <span
          style="
            font-size: 15px;
            margin-bottom: 20px;
            margin-left: 10px;
            display: block;
          "
          >附件上传（装炉单，检查单，质检单）</span
        >
        <div class="avatar">
          <div
            style="display: flex; flex-direction: column; height: 200px"
            v-if="fileName.ruleForms.length != 0"
            v-for="item in fileName.ruleForms"
          >
            <img
              ref="image"
              :key="item.key"
              :src="item.value"
              @click="shanchu(item.key, '检查单')"
              class="avatarImage"
            />
            <i
              class="el-icon-zoom-in iconCheck"
              @click="checkImage(item)"
              style="font-size: 25px; margin-left: 60px; margin-top: 10px"
            ></i>
          </div>

          <el-upload
            :action="interfaceUrl"
            list-type="picture-card"
            :limit="5"
            multiple
            :auto-upload="false"
            :file-list="fileName.chargeStove"
            :on-remove="handleRemoves"
            :on-preview="handlePictureCardPreview"
            :on-change="handleEditChanges"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>

        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="图片查看"
      :visible.sync="dialogVisibleImage"
      width="60%"
      :before-close="handleClose"
    >
      <img :src="imageCheckUrl" style="width: 100%; height: 100%" />
    </el-dialog>
  </div>
</template>

<script>
import { updatedAvater, graReportupdate, removeFile } from "@/api/process.js";
export default {
  name: "hisReport",
  components: {},
  data() {
    return {
      pageSize: 10, // 分页的页面大小
      totalCount: 0, // 分页的数据总数
      currentPage: 1, // 分页的当前页
      //开始
      zhuanglu: "单炉",
      disableds: false,
      shoveCharge: this.shoveCharges,
      graReport: this.graReports,
      interfaceUrl: "http://101.42.233.226:9000/", // 上传服务器的图片地址 图床的
      dialogImageUrl: "",
      dialogVisible: false,
      stoveReport2: [],
      stoveReport1: [],
      stoveReport3: [],
      time: [],
      tabClickIndex: null, // 列表当前点击的index
      fileName: {
        ruleForms: [],
        chargeStove: [],
      },
      flag: true,
      dialogVisibleImage: false,
      imageCheckUrl: "",
      // 结束
    };
  },
  props: ["shoveCharges", "graReports"],
  emits: {
    UpshoveCharge: null, // 不进行校验
    UpshoveCharges: null, // 不进行校验
  },
  watch: {
    shoveCharges(n) {
      this.shoveCharge = n;
      this.stoveReport2 = [];
      this.stoveReport1 = [];
      this.stoveReport3 = [];
      this.fileName.chargeStove = [];
    },
    graReports(n) {
      this.graReport = n;
      // console.log(this.graReport, "拿到的数据");
      this.time = [];
      if (n != 2) {
        if (n.graReportCharge.isTwoStove) {
          this.zhuanglu = "双炉";
          this.disableds = true;
          this.stoveReport2.push(
            n.graReportCharge.aStove,
            n.graReportCharge.bStove
          );
          this.stoveReport3.push(
            n.qualityTest.aStoveQuality,
            n.qualityTest.bStoveQuality
          );
          this.fileName.ruleForms = n.graReportCharge.fileName.chargeStove;
        } else {
          this.zhuanglu = "单炉";
          this.disableds = true;
          this.stoveReport2.push(n.graReportCharge.aStove);
          this.stoveReport3.push(n.qualityTest.aStoveQuality);
          this.fileName.ruleForms = n.graReportCharge.fileName.chargeStove;
        }
        this.stoveReport1.push(n.powerList);
        this.time.push(n.powerList.startTime, n.powerList.endTime);
      }
    },
  },
  mounted() {},
  computed: {
    nums() {
      let a = this.fileName.ruleForms.length + this.fileName.chargeStove.length;
      return a;
    },
  },
  methods: {
    //开始
    //查看图片
    checkImage(item) {
      this.dialogVisibleImage = true;
      this.imageCheckUrl = item.value;
      console.log(item);
    },
    //  上传装炉单
    async uploadDetailImg() {
      const formDatas = new FormData();
      this.fileName.chargeStove.forEach((element) => {
        formDatas.append("file", element.raw);
      });
      return updatedAvater(formDatas);
    },

    //取消按钮
    cancel() {
      this.$emit("UpshoveCharges");
    },
    //确定按钮
    async submitForm() {
      if (this.flag) {
        this.flag = false;
        let hd = await this.uploadDetailImg();
        this.shangchuan(hd.data.data);
        this.fileName.chargeStove = [];
        const promise = this.getdata().then((res) => {
          const data = res.data;
          this.$emit("UpshoveCharge", data, "修改工单");
          return true;
        });
        promise.then((res) => {
          this.flag = res;
        });
      }
    },

    async getdata() {
      function handle(str) {
        return str ? str.toString() : str;
      }
      let a = this.stoveReport2[0];
      let b = this.stoveReport2[1];
      let qualityTest = {};
      if (this.zhuanglu == "双炉") {
        b.accessory = handle(b.accessory);
        b.totalStove = handle(b.totalStove);
        qualityTest.bStoveQuality = this.stoveReport3[1];
      }
      a.accessory = handle(a.accessory);
      a.totalStove = handle(a.totalStove);
      qualityTest.aStoveQuality = this.stoveReport3[0];
      this.graReport.graReportCharge.aStove = a;
      this.graReport.graReportCharge.bStove = b;
      this.graReport.graReportCharge.fileName.chargeStove =
        this.fileName.ruleForms;
      this.graReport.powerList.startTime = this.time[0];
      this.graReport.powerList.endTime = this.time[1];
      this.graReport.qualityTest = qualityTest;
      return graReportupdate(this.graReport);
    },

    //结束
    //上传图片
    //删除图片
    shanchu(key, name) {
      const params = {
        fileName: key,
      };
      this.$confirm("此操作将删除图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return removeFile(params);
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: "图片删除成功",
              type: "success",
            });
          }
          this.fileName.ruleForms = this.fileName.ruleForms.filter(
            (item) => item.key != key
          );
        });
    },

    // 移除图片触发
    handleRemoves(file, fileList) {
      this.fileName.chargeStove = fileList;
    },
    // 上传图片触发，最多上传4个
    handleEditChanges(file, fileList) {
      this.fileName.chargeStove = fileList;
      if (this.nums > 4) {
        this.$message({
          message: "最多可以上传5张图片",
          type: "warning",
        });
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //上传图片结束
    //表格开始
    // 点击表格单元格时触发的方法
    cellClick(row, column, cell, event, table) {
      if (this.outStove || this.detial) {
        this.tabClickIndex = null;
      } else {
        this.tabClickIndex = row.index + column.label + table;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 修改表格头样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      const blon = rowIndex === 0 || rowIndex === 1;
      if (blon) {
        return "font-weight:200;background-color:#FBFBFF;color:black;";
      } else {
        return "";
      }
    },
    //表格结束
    shangchuan(hd1) {
      for (let key in hd1) {
        let obj = {};
        obj.key = `grareport_${key}`;
        obj.value = hd1[key];
        this.fileName.ruleForms.push(obj);
      }
    },
    handleClose() {
      this.imageCheckUrl = "";
      this.dialogVisibleImage = false;
    },
  },
};
</script>

<style  scoped>
.card-search {
  padding-bottom: 10px;
}
.tablebBtn .el-button {
  padding: 8px 7px;
}
.el-divider {
  margin: 30px 0;
}
.el-link {
  line-height: 1;
  padding-bottom: 12px;
}
.dialogTitle {
  padding: 18px;
  font-size: 18px;
}
.isTow {
   .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 2px 0 0 2px;
  }
   .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 2px 2px 0;
  }
   .is-active .el-radio-button__inner {
    background-color: $primary;
    border-color: $primary;
  }
}
 .el-dialog__footer {
  margin-top: 125px;
}
.el-link {
  color: #409eff;
  font-size: 12px !important;
  padding-bottom: 0;
}
.tableSpan {
  padding: 7px;
}
.tableInput {
  width: 100%;
}
</style>
<style >
.cellClassName {
  cursor: pointer;
  padding: 0 !important;
  .cell {
    min-height: 40px;
    padding: 0 !important;
  }
}

.jiancha {
  flex: 1;
  .avatar {
    width: 100%;
    margin-left: 20px;
    display: flex;
    .avatarImage {
      width: 145px;
      height: 145px;
      margin-right: 10px;
      border-radius: 10px;
      &:hover {
        opacity: 0.6;
        transition: 600ms;
      }
    }

    .iconCheck:hover {
      cursor: pointer;
    }
  }
}
</style>
